<template>
    <div class="containter">
        <div>
            <el-card>
                <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch"/>
            </el-card>
        </div>
        <el-card class="mg-t-20">
            <tableComponent class="set-height w-full" :table-header="tableHeader" :table-data="tableData"
                            v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #index>
                    <el-table-column type="expand">
                        <template #default="props">
                            <div class="w-full box-border flex gap-8px p-16px">
                                <div class="flex-1 flex flex-column gap-8">
                                    <div class="text-center font-bold text-24px">公司禁保区域</div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">地区：</div>
                                        <el-cascader
                                            class="!w-full"
                                            placeholder="请选择地区"
                                            size="default"
                                            :options="mapjson"
                                            :props="selectProps"
                                            collapse-tags
                                            collapse-tags-tooltip
                                            :max-collapse-tags="3"
                                            clearable
                                            v-model="tableDataInner[props.$index].companyArea.areas"
                                        >
                                        </el-cascader>
                                    </div>
                                    <div class="flex gap-8px w-full items-center"
                                         v-if="tableDataInner[props.$index].companyArea.areas?.length!==0">
                                        <div class="w-200px text-end flex-shrink-0">已选区域：</div>
                                        <div class="flex-1">
                                            <ul class="infinite-list" style="overflow: auto">
                                                <li v-for="(item,i) in tableDataInner[props.$index].companyArea.areas"
                                                    :key="i"
                                                    class="infinite-list-item">
                                                    {{ item.join('-') }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">是否匹配：</div>
                                        <el-select placeholder="请选择"
                                                   v-model="tableDataInner[props.$index].companyArea.needMatches">
                                            <el-option :key="false" label="否" :value="false"/>
                                            <el-option :key="true" label="是" :value="true"/>
                                        </el-select>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">备注：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].companyArea.remark"/>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">消息：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].companyArea.msg"/>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">处理信息：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].companyArea.solveMsg"/>
                                    </div>
                                </div>
                                <div class="flex-1 flex flex-column gap-8">
                                    <div class="text-center font-bold text-24px">派遣单位禁保区域</div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">地区：</div>
                                        <el-cascader
                                            class="!w-full"
                                            placeholder="请选择地区"
                                            size="default"
                                            :options="mapjson"
                                            :props="selectProps"
                                            collapse-tags
                                            collapse-tags-tooltip
                                            :max-collapse-tags="3"
                                            clearable
                                            v-model="tableDataInner[props.$index].serveCompanyArea.areas"
                                        >
                                        </el-cascader>
                                    </div>
                                    <div class="flex gap-8px w-full items-center"
                                         v-if="tableDataInner[props.$index].serveCompanyArea.areas?.length!==0">
                                        <div class="w-200px text-end flex-shrink-0">已选区域：</div>
                                        <div class="flex-1">
                                            <ul class="infinite-list" style="overflow: auto">
                                                <li v-for="(item,i) in tableDataInner[props.$index].serveCompanyArea.areas"
                                                    :key="i"
                                                    class="infinite-list-item">
                                                    {{ item.join('-') }}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">是否匹配：</div>
                                        <el-select placeholder="请选择"
                                                   v-model="tableDataInner[props.$index].serveCompanyArea.needMatches">
                                            <el-option :key="false" label="否" :value="false"/>
                                            <el-option :key="true" label="是" :value="true"/>
                                        </el-select>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">备注：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].serveCompanyArea.remark"/>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">消息：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].serveCompanyArea.msg"/>
                                    </div>
                                    <div class="flex gap-8px w-full items-center">
                                        <div class="w-200px text-end flex-shrink-0">处理信息：</div>
                                        <el-input placeholder="请输入"
                                                  v-model="tableDataInner[props.$index].serveCompanyArea.solveMsg"/>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-center">
                                <el-button size="large" type="primary" @click="onSure(tableDataInner[props.$index])">
                                    确定修改
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #name>
                    <el-table-column label="保司名称" prop="name">
                        <template #default="scope">
                            {{
                                mapName.find((ele, i) => {
                                    return ele.dictValue === scope.row.insurCompany
                                })?.dictLabel
                            }}
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
    </div>
    <addInsureDisArea v-model:show="showAdd" @success="onAddSusccess"/>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import addInsureDisArea from './components/dialog/addInsureDisArea.vue'
import mapjson from "../../../public/mapjson/map.json";
import {
    deleteInsurRegionRestrictionApi,
    editInsurRegionRestrictionApi,
    getInsureComponyList,
    getQueryInsurRegionRestrictionList,
    addInsurRegionRestrictionApi
} from "@/api/insure/longTerm";

const selectProps = {
    multiple: true,
    checkStrictly: true,
}
const filterData = ref({
    list: {
        insurCompany: {
            name: '保司',
            prop: 'insurCompany',
            value: '',
            placeholder: '请选择保司',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'dictLabel',
                value: 'dictValue'
            },
            handleFocus: (item) => {
                if (item.options?.length) return
                getInsureComponyList().then(res => {
                    item.options = res
                })
            }
        },
    },
    buttonList: [
        {
            icon: 'Plus',
            name: '新增',
            click: () => {
                showAdd.value = true
            }
        }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '序号',
        prop: 'index',
        width: 100
    },
    {
        label: '保司名称',
        prop: 'name',
    },
    {
        label: '保司编码',
        prop: 'insurCompany',
    },
    {
        label: '操作',
        prop: 'operate',
    }
])

const showAdd = ref(false)
const mapName = ref([])
const tableData = ref([])
const tableDataInner = ref([])
const onAddSusccess = async (val) => {
    console.log(val, 'val')
    let obj = JSON.parse(JSON.stringify(val))
    const newListOne = []
    const newListTwo = []
    obj.companyArea.areas.forEach(subList => {
        const newStr = subList.join('-').trim();
        newListOne.push(newStr);
    });
    obj.serveCompanyArea.areas.forEach(subList => {
        const newStr = subList.join('-').trim();
        newListTwo.push(newStr);
    });
    obj.companyArea.areas = newListOne
    obj.serveCompanyArea.areas = newListTwo
    if (obj.serveCompanyArea.areas.length === 0) {
        obj.serveCompanyArea = null
    }
    if (obj.companyArea.areas.length === 0) {
        obj.companyArea = null
    }
    addInsurRegionRestrictionApi(obj).then(res => {
        ElMessage.success({
            message: '新增成功'
        })
        getList()
    })
}
const handleSearch = () => {
    getList()
}
const onSure = (val) => {
    let obj = JSON.parse(JSON.stringify(val))
    if (obj.companyArea.areas.length === 0 && obj.serveCompanyArea.areas.length === 0) {
        ElMessage.error('请选择禁保区域')
        return;
    }
    if (obj.companyArea.areas.length !== 0 && obj.companyArea.needMatches === '') {
        ElMessage.error('请选择是否匹配')
        return;
    }
    if (obj.companyArea.areas.length !== 0 && !obj.companyArea.msg) {
        ElMessage.error('请输入消息')
        return;
    }
    if (obj.serveCompanyArea.areas.length !== 0 && obj.serveCompanyArea.needMatches === '') {
        ElMessage.error('请选择是否匹配')
        return;
    }
    if (obj.serveCompanyArea.areas.length !== 0 && !obj.serveCompanyArea.msg) {
        ElMessage.error('请输入消息')
        return;
    }
    const newListOne = []
    const newListTwo = []
    obj.companyArea.areas.forEach(subList => {
        const newStr = subList.join('-').trim();
        newListOne.push(newStr);
    });
    obj.serveCompanyArea.areas.forEach(subList => {
        const newStr = subList.join('-').trim();
        newListTwo.push(newStr);
    });
    obj.companyArea.areas = newListOne
    obj.serveCompanyArea.areas = newListTwo
    if (obj.serveCompanyArea.areas.length === 0) {
        obj.serveCompanyArea = null
    }
    if (obj.companyArea.areas.length === 0) {
        obj.companyArea = null
    }
    editInsurRegionRestrictionApi(obj).then(res => {
        ElMessage.success({
            message: '修改成功'
        })
        getList()
    })
}
const handlePageChange = () => {
    getList()
}

const createQuery = () => {
    const data = {}
    for (const key in filterData.value.list) {
        data[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return data
}
const init = () => {
    return {
        areas: [],
        msg: '',
        needMatches: '',
        remark: '',
        solveMsg: '',
    }
}
const getList = async () => {
    let res = await getQueryInsurRegionRestrictionList({
        ...createQuery(),
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    })
    tableData.value = res.list
    tableDataInner.value = JSON.parse(JSON.stringify(res.list))
    tableDataInner.value.forEach((item, index) => {
        const areaCompany = []
        const areaServeCompany = []
        if (!item.companyArea) {
            item.companyArea = init()
        }
        if (!item.serveCompanyArea) {
            item.serveCompanyArea = init()
        }
        item.companyArea?.areas.forEach(item => {
            const parts = item.split('-');
            areaCompany.push(parts);
        })
        item.serveCompanyArea?.areas.forEach(item => {
            const parts = item.split('-');
            areaServeCompany.push(parts);
        })
        item.companyArea.areas = areaCompany
        item.serveCompanyArea.areas = areaServeCompany
    })
    pageInfo.value.total = res.total
}

const handleRemove = (item) => {
    ElMessageBox.confirm(
        `是否确认删除?`,
        '提示',
        {
            type: 'warning',
        }
    )
        .then(() => {
            deleteInsurRegionRestrictionApi({
                id: item.id
            }).then(res => {
                ElMessage.success({
                    message: '删除成功'
                })
                getList()
            })
        })
}

onMounted(async () => {
    await getList()
    await getInsureComponyList().then(res => {
        mapName.value = res
    })
})
</script>
<style lang="scss" scoped>
.containter {
    padding: 16px;
}

.infinite-list {
    min-height: 10px;
    height: 150px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
</style>
